<script setup lang="ts">
  import { ref } from 'vue';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import {
    queryElderMedScheduleDetail,
    queryElderMedScheduleLog,
  } from '@/api/medication-management/drug-plan';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';

  const elderData = ref<any>();

  const dateStr = ref('');

  const executeInfo = ref<any[]>([]);

  const getScheduleData = (params: any) => {
    return [
      {
        label: '计划时间',
        value: `${dateStr.value} ${params.typeLabel}`,
      },
      {
        label: '计划状态',
        value: params.statusLabel,
      },
    ];
  };

  const planList = useSkeleton({
    apiFun: queryElderMedScheduleDetail,
    immediate: false,
    onSuccess(data) {
      executeInfo.value = getScheduleData(data);
    },
  });

  const scheduleLog = useSkeleton({
    immediate: false,
    apiFun: queryElderMedScheduleLog,
  });

  const detailDrawer = useModeModalBinder({
    modes: ['detail'] as const,
    renderTitle() {
      return '计划详情';
    },
    onShow(mode, otherParams) {
      const { scheduleData: sd, elder, date, week } = otherParams;

      dateStr.value = `${date} 周${week}`;
      elderData.value = elder;
      planList.execute(elder.elderId, sd.scheduleId);
      scheduleLog.execute(sd.scheduleId);
    },
  });

  // dotColor="#00B42A"
  const dotColor: Record<string, string> = {
    1: '#00B42A',
    2: '#00B42A',
    3: '#00B42A',
    4: '#00B42A',
    5: '#00B42A',
  };

  defineExpose(detailDrawer.expose);
</script>

<template>
  <a-drawer
    position="right"
    width="500px"
    :footer="false"
    v-bind="detailDrawer.bindProps"
  >
    <div class="flex flex-col gap-2">
      <div class="mt-2">
        <a-descriptions :data="executeInfo" :column="1" layout="vertical" />
      </div>

      <div>
        <h2 class="text-lg mb-2">用药清单</h2>
        <skeleton-view v-slot="{ data }" v-bind="planList.bindProps">
          <div
            v-if="data.drugList && data.drugList.length > 0"
            class="flex flex-col gap-2"
          >
            <div
              v-for="(item, index) in data.drugList"
              :key="index"
              class="med-item flex flex-col p-3 gap-2"
            >
              <span :class="['tag', `status-${item.executeStatus}`]">
                {{ item.executeStatusLabel }}
              </span>
              <span class="text-lg med-name">{{ item.drugName }}</span>
              <span>用药时间：{{ item.period }}</span>
              <span>
                计划用量：{{ item.scheduleQuantity }}{{ item.takeUnitName }}
              </span>
              <span>生产厂家：{{ item.companyName }}</span>
              <template v-if="item.executeStatus === 3">
                <span>实际用量：{{ item.takeQuantity }}</span>
                <span>异常原因：{{ item.exceptionMsg }}</span>
              </template>
            </div>
          </div>
          <div v-else class="text-slate-500">暂无用药清单</div>
        </skeleton-view>
      </div>

      <div>
        <h2 class="text-lg mb-2">执行记录</h2>
        <skeleton-view v-slot="{ data }" v-bind="scheduleLog.bindProps">
          <a-timeline line-type="dashed">
            <a-timeline-item
              v-for="(item, index) in data"
              :key="index"
              :label="item.logTime"
              :dot-color="dotColor[item.logType as string]"
            >
              <div class="flex flex-col">
                <span class="text-lg">{{ item.logTypeLabel }}</span>
                <span class="text-slate-500 mt-1">
                  {{ item.logDesc }}
                </span>
              </div>
            </a-timeline-item>
          </a-timeline>
        </skeleton-view>
      </div>
    </div>
  </a-drawer>
</template>

<style lang="less" scoped>
  .med-item {
    .med-name {
      color: #333333;
      font-size: 16px;
      text-indent: 4px;
    }
    border-radius: 4px;
    font-size: 14px;
    color: #666666;
    background-color: #f7f8fa;
    line-height: 1;
    position: relative;
    overflow: hidden;

    .tag {
      font-size: 12px;
      text-align: center; // 文本居中
      position: absolute; // 绝对定位
      top: 6px;
      right: -20px;
      // 以下属性会影响斜边标签的显示
      padding: 4px 20px;
      line-height: 1;
      transform: rotate(40deg);
    }

    .status-1 {
      background-color: #f2f3f5;
      color: #86909c;
    }

    .status-2 {
      background-color: #e8ffea;
      color: #00b42a;
    }

    .status-4 {
      background-color: #ffece8;
      color: #f53f3f;
    }
  }
</style>
